{% extends "admin/admin_base.html" %}

{% block title %}
{{ article.title }}
{% endblock title %}

{% block css %}
<script src='/js/highlight.pack.js'></script>
<script src="/js/arttemplate.js"></script>
<link href='/css/monokai_default.css' rel='stylesheet'/>
<link href='/css/article_view.css' rel='stylesheet'/>
<style>
    pre {
        padding: 0px;
    }
</style>
{% endblock css %}

{% block body %}
<header>
    <div class="img">
        <img src="/images/img_12.webp" class="img-responsive img-rounded"/><br>
        <p class="text-right">--- 摄于 2017 年 9 月 藏川线前段</p>
    </div>
</header>
<div class="col-md-offset-1 col-md-10" data-id={{ article.id }}>
 {{ article.content | safe }}
</div>

{% endblock body %}

{% block script %}
<script>
    "use strict";
    $(function () {
        var id = $(".col-md-offset-1").attr("data-id");
        hightlight($("pre code"));
        $.getJSON("/api/v1/article/admin/view?id=" + id, function (result) {
            $(".col-md-offset-1")
                .append("<blockquote class='pull-right'><h5 class='post-meta'>Last Modified:</h5>" +
                    "<p class='pull-right post-meta'>" + moment.utc(result.data.modify_time).local().format("YYYY-MM-DD HH:mm:ss") +
                    "</p></blockquote>");
            var tags = {data: []};

            $.each(result.data.tags, function (index, value) {
                if (value !== null) {
                    tags.data.push([result.data.tags_id[index], value])
                }
            });
            var html = template("tpl-tag-list", tags);
            $(".col-md-offset-1").children().first().after(html)
        });
    });

    function hightlight($doms) {
        $doms.each(function(i, block) {
            hljs.highlightBlock(block);
        });
    }
</script>
<script id="tpl-tag-list" type="text/html">
    {% raw %}
    <div style="margin-bottom: 10px;">
        {{each data}}
        <span class='label label-info' tag-id={{ $value[0] }}><span class='glyphicon glyphicon-tags'
                                                                    style='margin-right: 5px;'></span>{{ $value[1] }}</span>
        {{/each}}
    </div>
    {% endraw %}
</script>
{% endblock script%}
